<style>
.select2-container-multi .select2-choices{
	border: 1px solid #ccc;
	border-radius: 4px;
}

.select2-container-multi.select2-container-active .select2-choices {
    border: 1px solid #3270d0;
	border-radius: 4px;
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}
.select2-drop-active{
	border-top: 1px solid #5897fb;
}
</style>
<div role="tabpanel" class="tab-pane active" id="home-dynamic">
<div class="bordeMenu-content" style="display:none">
    <!--{loop $grouppatharr $v}-->
    <li>
        <a href="javascript:;" class="routes"
           data-type="group-gid_$gid">$v<span>></span></a>
    </li>
    <!--{/loop}-->
    <input type="text" class="form-control bordeInput referer_path" name="referer_path"
           value="$grouppathstr" style="display: none;"/>
</div>
    <div class="group-dynamic">
    	<div class="group-allgame-top">
        <div class="fieldset">
            <div class="group-time form-control-group">
                <input type="text" id="selectDate" readonly="readonly" />
                <label>{lang reach}</label>
                <input type="text" id="selectDate1" readonly="readonly" />
            </div>
            
            <div class="form-control-group clearfix">
                <div class="group-input">
                    <select class="js-example-basic-multiple js-states" id="id_label_multiple" multiple="multiple">
                        {loop $users $k $v}
					 	<option value="$k">$v</option>
                        {/loop}
					 </select>
                </div>
            </div>

        </div>
        </div>
        <div class="group-table">
            <p class="group-tableword" style="display:none;">{lang additional_screening_conditions}：</p>
            <div class="table-top">
                <table class="table">
                    <thead>
                    <tr>
                        <td class="w-13 ">{lang time}</td>
                        <td class="w-15 ">{lang operator}</td>
                        <td class="w-13">{lang operation}</td>
                        <td class="" style="width: 29%;">{lang object}</td>
                        <td style="width: 30%;">{lang details}</td>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="table-con table-blue">
            	<!--{if $events}-->
                <table class="table">
                    <tbody  id="event_list">
                	
                    <!--{loop $events $val}-->
                    <tr>
                        <td class="w-13">{eval echo dgmdate($val['dateline'],'Y-m-d');}<br/>{eval echo dgmdate($val['dateline'],'H:i:s');}</td>
                        <td class="w-15">$val['username']</td>
                        <td class="w-13"><a href="javascript:;" onclick="search_do(this)" data-val="$val['do']">$val[do_lang]</a></td>
                        <td style="width: 31%;"><a href="javascript:;" onclick="search_obj(this)" data-val="$val[do_obj]"><!--{if $val[do_obj]}-->$val[do_obj]<!--{/if}--></a></td>
                        <td>$val[details]</td>
                    </tr>
                    <!--{/loop}-->
                    </tbody>
                </table>
                <!--{else}-->
                <p class="no-dynamic">{lang no_dynamic}</p>
                <!--{/if}-->
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
	$("#selectDate,#selectDate1").datepicker({ //添加日期选择功能
			numberOfMonths: 1, //显示几个月
			showButtonPanel: false, //是否显示按钮面板
			dateFormat: 'yy-mm-dd', //日期格式
			clearText: "{lang clear}", //清除日期的按钮名称
			closeText: "{lang close}", //关闭选择框的按钮名称
			yearSuffix: '{lang year}', //年的后缀
			showMonthAfterYear: true, //是否把月放在年的后面
			constrainInput: true,
			maxDate: new Date(),
			setDate: 'date',
	
	});
    var search_data = {'gid':'{$gid}','doobj':'','doevent':'',uids:'',startdate:'',enddate:''};
    function search_do(obj){
        var doval = $(obj).data('val');
        var dotext= $(obj).html();
        search_data.doevent =  doval;
        $.post(MOD_URL+'&op=group&do=dynamicsearch',search_data,function(data){
            $('#event_list').html(data);
            $('.group-tableword').show();
            $('.group-tableword').append('<span>{lang operation}：'+dotext+'<i class="glyphicon glyphicon-remove" onclick="empty_do(this)" data-val="'+doval+'"></i></span>');
        })
    }
    function search_obj(obj){
        var doval = $(obj).data('val');
        var objtext = $(obj).html();
        search_data.doobj =  doval;
        $.post(MOD_URL+'&op=group&do=dynamicsearch',search_data,function(data){
            $('#event_list').html(data);
            $('.group-tableword').show();
            $('.group-tableword').append('<span>'+objtext+'<i class="glyphicon glyphicon-remove" onclick="empty_do(this)" data-val="'+doval+'"></i></span>');
        })
    }
    function empty_do(obj){
        var val = $(obj).data('val');
        for(var o in search_data){
            if(search_data[o] == val){
                search_data[o] = '';
            }
        }
        $.post(MOD_URL+'&op=group&do=dynamicsearch',search_data,function(data){
            $('#event_list').html(data);
            $(obj).parents('span').remove();
            if($('.group-tableword').find('span').length < 0){
                $('.group-tableword').hide();
            }
        })
    }
$.getScript('static/select2/select2.min.js',function(){
    	$("#id_label_multiple").select2({
		placeholder: "{__lang.click_or_import_to_start_adding_colleagues}",
	}).on('change',function(){
        search_data.uids = $(this).val();
        $.post(MOD_URL+'&op=group&do=dynamicsearch',search_data,function(data){
            $('#event_list').html(data);
        })
    })
});
	
	$('#selectDate,#selectDate1').change(function(){
	    search_data.startdate = $('#selectDate').val();
	    search_data.enddate = $('#selectDate1').val();
        var start = new Date(search_data.startdate);
        var end = new Date(search_data.enddate);
        if(start > end) return false;
        $.post(MOD_URL+'&op=group&do=dynamicsearch',search_data,function(data){
            $('#event_list').html(data);
        })
    })
</script>